import React, { useEffect, useState } from "react";
import "./nav.less";
import { Badge, Button } from "antd";
import { useNavigate } from "react-router-dom";
import { getUserById } from "../../server/api";
import { COMURL } from "../../constant";
interface INavBarProps {
  count: number;
}
const NavBar: React.FC<INavBarProps> = ({ count }) => {
  const navigate = useNavigate();
  const [userInfo, setUserInfo] = useState<any>({});

  const handleLink2Rooms = () => {
    navigate("/StudyRooms");
  };
  const handleLink2PersenalCenter = () => {
    navigate("/PersonalCenter");
  };
  const handleLingk2BookingRecord = () => {
    navigate("/BookingRecord");
  };
  const handleLink2Notification = () => {
    navigate("/Notification");
  };
  const linkToHome = () => {
    navigate("/Home");
  };

  const getUserInfo = async () => {
    const res = await getUserById({
      id: parseInt(localStorage.getItem("userId") || "0"),
    });
    setUserInfo(res);
  };
  const loginout = () => {
    localStorage.clear();
    navigate("/");
  };

  useEffect(() => {
    getUserInfo();
  }, []);
  return (
    <header className="nav">
      <div className="logo" onClick={linkToHome}>
        <img className="logo-img" src={`./logo.png`} alt="大黑自习室" />
      </div>
      <div className="content">
        <div className="txt" onClick={handleLink2Rooms}>
          查看自习室
        </div>
        <div className="txt" onClick={handleLingk2BookingRecord}>
          我的预约
        </div>
        <div className="txt" onClick={handleLink2PersenalCenter}>
          个人中心
        </div>
        <Badge count={count}>
          <div className="txt" onClick={handleLink2Notification}>
            通知消息
          </div>
        </Badge>
      </div>
      <div className="other">
        <div className="userInfo">
          <div className="avator">
            <img
              src={`${COMURL}${userInfo.userHead}`}
              alt=""
              className="avator-img"
            />
          </div>
          <span className="userName">
            {userInfo.userName ? userInfo.userName : "匿名用户"}
          </span>
        </div>

        <div className="login-out">
          <Button
            style={{ backgroundColor: "transparent", color: "white" }}
            onClick={loginout}
          >
            退出登录
          </Button>
        </div>
      </div>
    </header>
  );
};
export default NavBar;
